<template>
    <div class="wrapper">
        <div class="custom-space"></div>
        <dl class="word">
            <dt>开始创建第一个页面</dt>
            <dd>点击下方模块快速搭建表单、列表页、流程配置等！ 如有疑问点击查看帮助>></dd>
        </dl>
        <div class="custom-space"></div>
        <div class="box">
            <div class="list">
                <span><img src="@/assets/form-design.png" /></span>
                <dl>
                    <dt>表单设计</dt>
                    <dd>快速信息搜集</dd>
                </dl>
            </div>
            <div class="list" @click="handleOpenListPage">
                <span><img src="@/assets/list-design.png" /></span>
                <dl>
                    <dt>列表页设计</dt>
                    <dd>后台快速管理数据</dd>
                </dl>
            </div>
            <div class="list">
                <span><img src="@/assets/create-logic.png" /></span>
                <dl>
                    <dt>创建逻辑</dt>
                    <dd>灵活扩展业务互联</dd>
                </dl>
            </div>
            <div class="list">
                <span><img src="@/assets/flow-config.png" /></span>
                <dl>
                    <dt>流程配置</dt>
                    <dd>快速的信息搜集</dd>
                </dl>
            </div>
            <div class="list" @click="handleOpenCreateModelDialog">
                <span><img src="@/assets/create-model.png" /></span>
                <dl>
                    <dt>创建模型</dt>
                    <dd>应用的数据结构和管理</dd>
                </dl>
            </div>
            <div class="list" @click="handleOpenCustomizePageDialog">
                <span><img src="@/assets/customize-page.png" /></span>
                <dl>
                    <dt>自定义页面</dt>
                    <dd>引用外部站点</dd>
                </dl>
            </div>
        </div>
    </div>
</template>

<script setup>
import pinia from "@/store/pinia";
import { useStore } from "@/store/lowCode.js";
const lowCodeStore = useStore(pinia);

const handleOpenCreateModelDialog = () => {
    lowCodeStore.createModelDialog.visible = true;
}

const handleOpenCustomizePageDialog = () => {
    lowCodeStore.customizePageDialog.visible = true;
}

const handleOpenListPage = () => {
    window.open("/data-manage", "_blank")
}
</script>

<style lang='less' scoped>
.wrapper {
    width: 930px;
    margin: 0 auto;
}

.word dt {
    margin: 0;
    padding: 0;
    line-height: 30px;
    font-size: 15px;
    font-weight: bold;
}

.word dd {
    margin: 0;
    padding: 0;
    line-height: 30px;
    font-size: 13px;
    color: rgb(102, 102, 102);
}

.box {
    display: grid;
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.list {
    height: 150px;
    background: linear-gradient(178deg, #e4edff -10%, #fff 40%);
    border: 1px solid rgb(238, 239, 240);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    cursor: pointer;

    span {
        display: block;
        width: 144px;
        height: 144px;

        img{
            width: 144px;
            height: 144px;
        }
    }

    dl {
        width: 200px;
    }

    dt {
        line-height: 30px;
        font-size: 13px;
        font-weight: bold;
    }

    dd {
        line-height: 30px;
        font-size: 12px;
        color: rgb(102, 102, 102);
    }
}
</style>